<template>
  <div>
    <div class="page_title">专家库管理{{ }}</div>
    <FormTable :name="table.name" :tableButton="table.button" :formRules="formRules" :tableData="table.tableData"
      :columns="table.columns" :total="total" :currentPage="queryParams.pageNum" :pageSize="queryParams.pageSize"
      @changeTableData="changeTableData" @tableButtonClick="addZJ" @queryTable="queryTable">
      <template #check="{ slotProps }">
        <el-tag class="ml-2" :type="slotProps.check ? 'success' : 'danger'">
          {{ checkFilter(slotProps.check) }}
        </el-tag>
      </template>
      <template #operator="{ slotProps }" class="table_button_list">
        <span class="table_button" @click="goToDetail(slotProps)">查看</span>
        <el-divider direction="vertical" />
        <span class="table_button" @click="goToDetail(slotProps)">编辑</span>
        <el-divider direction="vertical" />
        <span class="table_button" @click="goToDetail(slotProps)">删除</span>
      </template>
    </FormTable>
    <el-dialog v-model="dialogVisible" width="320px" :title="title" :before-close="handleClose">
      <el-form ref="ruleFormRef" :rules="diaRules" :inline="true" :model="addForm" class="demo-form-inline"
        :disabled="dialogDisabled">
        <el-form-item label="专家姓名" prop="expertName">
          <el-input v-model="addForm.expertName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="addForm.idCard" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="单位名称" prop="unitName">
          <el-input v-model="addForm.unitName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="联系方式" prop="telephone">
          <el-input v-model="addForm.telephone" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="职务职称" prop="position">
          <el-input v-model="addForm.position" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="业务领域" prop="businessDomain">
          <el-input disabled v-model="addForm.businessDomain" placeholder="请选择" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addExpertToList">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script name="expertList" setup>
import FormTable from "@/components/FormTable/index.vue";
import { useRouter } from "vue-router";
import { getList, addExpert } from '@/api/expert'
import { ElMessage, ElLoading } from 'element-plus'
import { belongDomain } from "@/utils/enum";

const router = useRouter();
const dialogVisible = ref(false)
let addForm = reactive({ businessDomain: '诚信计量' })
let queryParams = reactive({ pageNum: 1, pageSize: 10, groups: [], rules: [], orderBys: [] })
let title = ref('')
let total = ref(0);
let dialogDisabled = ref(false)
const table = reactive({
  tableData: [],
  name: '专家列表',
  button: '添加',
  columns: [
    {
      label: "专家姓名",
      prop: "expertName",
    },
    {
      label: "身份证号",
      prop: "idCard",
      width: '180px'
    },
    {
      label: "单位名称",
      prop: "unitName",
    },
    {
      label: "联系方式",
      prop: "telephone",
    },
    {
      label: "职务/职称",
      prop: "position",
    },
    {
      label: "业务领域",
      prop: "businessDomain",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
const formRules = ref([
  {
    type: "input",
    field: "expertName",
    title: "专家姓名",
    value: "",
  },
  {
    type: "input",
    field: "idCard",
    title: "身份证号",
    value: "",
  },
  {
    type: "input",
    field: "unitName",
    title: "单位名称",
    value: "",
  },
  {
    type: "input",
    field: "telephone",
    title: "联系方式",
    value: "",
  },
  {
    type: "input",
    field: "position",
    title: "职务/职称",
    value: "",
  },
  {
    type: "select",
    field: "businessDomain",
    title: "业务领域",
    props: { disabled: true },
    value: "诚信计量",
  }
]);
const diaRules = reactive({
  expertName: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  idCard: [
    { required: true, message: '必填', trigger: 'blur' },
    {
      pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
      message: '证件号码格式有误！',
      trigger: 'blur'
    }
  ],
  unitName: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  unitName: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  telephone: [
    { required: true, message: '必填', trigger: 'blur' },
    {
      pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
      message: '手机号格式不对',
      trigger: 'blur'
    }
  ],
  position: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  belongDomain: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  businessDomain: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
})
const ruleFormRef = ref(null)

const addZJ = () => {
  dialogDisabled.value = false
  dialogVisible.value = true
  title.value = '新增专家'
}
function changeTableData(pageNum, pageSize) {
  queryParams.pageNum = pageNum
  queryParams.pageSize = pageSize
  query()
}
const goToDetail = (props) => {
  dialogVisible.value = true
  dialogDisabled.value = true
  title.value = '查看专家'
  addForm = props
}
const addExpertToList = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      addExpert(addForm).then(res => {
        if (res.code == "0") {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          addForm = reactive({ businessDomain: '诚信计量' })
          dialogVisible.value = false
          query(queryParams)
        }
      })
    } else {
      return false;
    }
  })

}
onMounted(() => {
  query(queryParams)
})
function queryTable(params) {
  let rules = []
  for (let key in params) {
    let val = params[key]
    val && rules.push(
      {
        field: key,
        data: val,
        opType: "Contains"
      }
    )
  }
  queryParams.rules = rules
  query()
}
function query() {
  getList(queryParams).then(res => {
    table.tableData = res.data.list
    total.value = res.data.total
  })
}
</script>
<style lang="scss" scoped></style>
